<template>
    <div class="container-fluid" v-loading="loading">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header"><h4>热门品牌</h4></div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="summary">热门公司模式</label>
                            <div class="block">
                                <el-select v-model="model" placeholder="全部">
                                    <el-option
                                            v-for="item in selectOptions"
                                            :key="item.value"
                                            :label="item.value"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="summary">热门公司名单</label>
                            <div class="block">
                                <el-autocomplete
                                        v-model="companyName"
                                        :fetch-suggestions="querySearchAsync"
                                        placeholder="请输入内容"
                                        @select="handleSelect"
                                ></el-autocomplete>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="summary">手动模式热门公司列表</label>
                            <el-tag
                                    :key="tag.id"
                                    v-for="tag in companyTags"
                                    closable
                                    :disable-transitions="false"
                                    @close="handleCompanyClose(tag)"
                                    v-dragging="{ item: tag, list: companyTags, group: 'color' }">
                                {{tag.value}}
                            </el-tag>
                        </div>

                        <div class="form-group">
                            <label for="summary">自动模式热门公司列表</label>
                            <el-tag
                                    :key="tag.id"
                                    v-for="tag in companyTags"
                                    closable
                                    :disable-transitions="false"
                                    @close="handleCompanyClose(tag)">
                                {{tag.value}}
                            </el-tag>
                        </div>

                        <button type="submit" class="btn btn-primary" v-on:click="submit()">提交</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "HotCompanyComponent",
        data() {
            return {
                model: 0,
                describe: '',
                selectOptions: [],
                companies: [],
                loading: false,
                companyId: '',
                companyName:'',
                companyTags:[],
                companyIds:[],
                autoCompanyIds:[],
                uniqueId:''
            }
        },
        methods: {
            submit: function () {
                let self = this;
                let uri = "setting/hot/update-company/"+self.uniqueId;
                let data = {
                    model: self.model,
                    companyIds: self.companyIds,
                    autoCompanyIds:self.autoCompanyIds
                };
                axios.put(uri,data).then(function (result) {
                    window.location.reload();
                    self.$message.success('更新成功！');
                });
            },
            getModelInfo: function () { //模式
                let self = this;
                let uri = "setting/hot/model-list";
                self.loading = true;

                axios.get(uri).then(function (result) {
                    var data = result.data;
                    self.selectOptions = [];
                    data.list.forEach((item, index) => {
                        self.selectOptions.push({'value': item, 'id': index});
                    });
                    var hotCompany = data.hotCompany;
                    self.uniqueId = hotCompany.uniqueId;
                    self.model = hotCompany.model;
                    self.companyIds = hotCompany.companyIds;
                    self.companyTags = data.companies;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            getNameList: function () {
                let self = this;
                let uri = "company/search/";
                axios.get(uri).then(function (result) {
                    self.companies = result.list;
                });
            },
            querySearchAsync(queryString, cb) {
                var restaurants = this.companies;
                var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 3000 * Math.random());
            },
            handleSelect(item) {
                this.companyName = '';
                if (item && this.companyIds.indexOf(item.id) === -1) {
                    this.companyTags.push(item);
                    this.companyIds.push(item.id);
                }
                console.log(item);
            },
            handleCompanyClose(tag) {
                this.companyTags.splice(this.companyTags.indexOf(tag), 1);
                this.companyIds.splice(this.companyIds.indexOf(tag.id), 1);
            },
        },
        mounted() {
            this.getModelInfo();
            this.getNameList();
            let self = this;
            this.$dragging.$on('dragged', ({ value }) => {
                self.companyIds = [];
                value.list.forEach((item, index) => {
                    self.companyIds.push(item.id);
                });
            });
        }
    }
</script>

<style scoped>

</style>
